<template>
  <div>
    <goga-header title="订单详情">
      <div slot="left">
        <span @click="goBack">
          <icon symbol="back"> </icon>
        </span>
      </div>
    </goga-header>
    <img v-if="firstLoading" class="gxb-loading" src="/public/images/loding.gif" alt="">
    <div v-if="!firstLoading">
      <div class="o-detail-box1" v-if="getDetail.data">
        <div class="p-state">
          订单<span v-if="getDetail.data.oState == 0" >未付款</span>
          <span v-if="getDetail.data.oState == 1" >待发货</span>
          <span v-if="getDetail.data.oState == 2" >待收货</span>
          <span v-if="getDetail.data.oState == 3" >待评价</span>
          <span v-if="getDetail.data.oState == 4" >已取消</span>
          <span v-if="getDetail.data.oState == 6" >已完成</span>
        </div>
        <div class="item">
          <span>订单编号：</span>{{getDetail.data.orderSn}}
        </div>
        <div class="item">
          <span>下单时间：</span>{{getDetail.data.oDeliveryDate}}
        </div>
      </div>
      <div class="o-detail-box2" v-if="getDetail.shop">
        <router-link class="p-header" :to="{name:'shop',params:{shopId: getDetail.shop.warehouseSn}}">
          <div class="p-shop">
            <div class="p-pic" v-lazy:background-image="'http://www.gogagoga.cc/picfile/'+getDetail.shop.wPic">
            </div>
            <div class="p-name">{{getDetail.shop.wName}}</div>
            <icon symbol="right"> </icon>
          </div>
        </router-link>
        <div class="p-goods">
          <div class="item" v-for="item in getDetail.data.goodList">
            <div class="p-name">{{item.goName}} <span>{{item.spName}}</span></div>
            <div class="p-price">
              ¥{{item.goMoney}}x{{item.goNum}}
            </div>
          </div>
        </div>
        <div class="p-bottom">
          <a v-if="getDetail.data.oState != 0" class="o-btn"  @click.stop href="tel:4001681520" >售后服务</a>
          <a v-if="getDetail.data.oState == 0" class="o-btn" @click.stop.prevent="cancelOrder(getDetail.data.orderSn)">取消订单</a>
          <a  v-if="getDetail.data.oState == 2" @click.stop.prevent="confirm(order.orderSn)">确认送达</a>
          <a v-if="getDetail.data.oState == 0" class="o-btn yellow" @click.stop.prevent="link({name:'pay',params:{orderId:getDetail.data.orderSn}})">前往支付</a>
          <a v-if="getDetail.data.oState == 3" @click.stop.prevent="link({name:'rate',params:{id:getDetail.data.orderSn}})">立即评价</a>
        </div>
      </div>
      <div class="o-detail-box3" v-if="getDetail.data">
        <div class="p-address">
          <p>{{getDetail.data.aName}} &nbsp;&nbsp;&nbsp;&nbsp;{{getDetail.data.uPhone}}</p>
          <p>{{getDetail.data.addressDetail}}</p>
        </div>
        <div class="p-price">
          <div class="item">
            <span>商品总金额: </span>￥{{getDetail.data.oSum}}
          </div>
          <div class="item">
            <span>运费: </span>￥{{getDetail.data.oFreight}}
          </div>
          <div class="item">
            <span>商品减免: </span>￥{{getDetail.data.oDiscount}}
          </div>
          <div class="item">
            <span>优惠券: </span>￥{{getDetail.data.oCoupon}}
          </div>
        </div>
        <div class="p-all">
          实付：￥{{getDetail.data.oMoney}}
        </div>
      </div>
    </div>
    <div class="order-detail-wrapper" v-if="!firstLoading"></div>
  </div>
</template>
<script lang="babel">
  import gogaHeader from '@components/goga-header'
  import Icon from '@components/icon'
  import {mapGetters} from 'vuex'

  const fetchOrderDetail = async function (store, orderId) {
    store.dispatch('backend/order/getDetail', orderId)
  }
  export default {
    components: {
      gogaHeader,
      Icon
    },
    computed: {
      ...mapGetters({
        isLogin: 'global/user/isLogin',
        getDetail: 'backend/order/getDetail'
      })
    },
    data() {
      return {
        firstLoading:true
      }
    },
    async mounted() {
      let orderId = this.$route.params.id;
      await fetchOrderDetail(this.$store, orderId);
      this.firstLoading = false;
    },
    methods:{
      goBack() {
        this.$router.go(-1);
      },
      link(route) {
        this.$router.push(route)
      },
      async confirm(orderID) {
        if (confirm('确认收货？')) {
          let orderId = this.$route.params.id;
          let {data: {StatusCode}} = await api.get('api/v1/Order/confirmDelOrder.ashx', {orderSn: orderID});
          if (StatusCode === '200') {
            fetchOrderDetail(this.$store, orderId);
            this.$store.dispatch('global/toast', '及时评价订单有积分赠送哦');
          }
        }
      },
      async cancelOrder (orderID) {
        if (confirm('确认删除？')) {
          let orderId = this.$route.params.id;
          let {data: {StatusCode, Status}} = await api.get('api/v1/Order/closeOrder.ashx', {orderSn: orderID});
          if (StatusCode === '200') {
            fetchOrderDetail(this.$store, orderId);
            this.$store.dispatch('global/toast', '订单取消成功');
          } else {
            this.$store.dispatch('global/toast', Status);
          }
        }
      }
    }
  }
</script>

<style lang="less">
  @import "index.less";
</style>
